<template>
	<view class="wish-items-list-app">
		<!--
		<my-tabs :items="tab.items" :value="tab.current" :fixed="true" @onTabChange="onTabChange"></my-tabs>
		-->
		<!--
		<button open-type="share" @click="shareItem">分享详情</button>
		-->
		<view class="items">
			<view class="empty" v-if="listData.items.length == 0" style="text-align: center">找不到相关数据</view>
			<view class="item" v-for="(item, key) in listData.items" :key="key">
				<view class="actions" v-if="item.payState == 1">
					<!--
					<view class="action btn btn-success" style="width:100upx" @click="openHouse(item)">开锁</view>
					-->
					<view class="order-name">订单信息</view>
					<view class="order-btn">
						<view
							class="btn-sm"
							style="width: 100upx"
							@click="showPayRenewDialog(item)"
							v-if="item.canRenew"
						>
							续单
						</view>
						<button
							class="btn-sm"
							style="width: 132upx;"
							@click="shareDialog(item)"
							open-type="share"
						>
							分享订单
						</button>
						<!-- <view
							class="btn-sm"
							style="width: 100upx"
							@click="goPage('/pages/user/order/comment?orderNO=' + item.orderNO)"
							v-if="item.canComment"
						>
							评论
						</view> -->
					</view>
				</view>
				<view class="fields">
					<view class="field">
						<view class="title">房间编号:</view>
						<view class="value">{{ item.roomName }}</view>
					</view>
					<view class="field">
						<view class="title">订单编号:</view>
						<view class="value">{{ item.orderNO }}</view>
					</view>
					<view class="field">
						<view class="title">开始时间:</view>
						<view class="value">{{ item.startTime }}</view>
					</view>
					<view class="field">
						<view class="title">结束时间:</view>
						<view class="value">{{ item.endTime }}</view>
					</view>
					<view class="field" v-if="item.money">
						<view class="title">消费金额:</view>
						<view class="value">{{ item.money }}元</view>
					</view>
					<view class="field">
						<view class="title">支付状态:</view>
						<view class="value" style="color: red;" v-if="item.payState == 0">未支付</view>
						<view class="value" style="color: #FC9E17;" v-if="item.payState == 1">已支付</view>
					</view>
				</view>
			</view>
		</view>
		<!--
		<uni-load-more :status="listData.status"></uni-load-more>
		-->
		<modal
			:show="payRenewDialog.show"
			@close="payRenewDialog.show = false"
			@cancel="payRenewDialog.show = false"
			@confirm="toPay"
			:show-cancel="true"
			confirm-text="确定"
			cancel-text="关闭"
		>
			<!--
			<view class="dialog-head">确认订单</view>
			-->
			<view class="app-info-dialog" style="padding:50upx;30upx">
				<view class="info-field" style="display: flex">
					<view class="tit" style="width: 290upx">续单时间(小时)：</view>
					<view class="value" style="flex: 1; border: 1px solid #eee; padding-left: 10upx">
						<picker @change="bindPickerChange" :value="index" :range="hourArray" style="width: 100%">
							<view class="uni-input">{{ hourArray[hourIndex] }}</view>
						</picker>
					</view>
				</view>
			</view>
		</modal>
		<customTarbar :selected="2"></customTarbar>
	</view>
</template>

<script>
import util from '@/libs/util.js';
import MyTabs from '@/components/my-tabs.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import Modal from '@/components/neil-modal/neil-modal.vue';
import customTarbar from '@/components/tarbar/custom-tarbar.vue';
import globalConfig from '@/config';
const baseHttp = globalConfig.API_HOST;
export default {
	data() {
		return {
			hourIndex: 0,
			hourArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
			payRenewDialog: {
				show: false,
				orderNO: ''
			},
			baseHttp: baseHttp,
			tab: {
				current: null,
				items: [{ value: null, label: '包间消费' }]
			},
			listData: {
				status: 'loading',
				loading: false,
				perpage: 10,
				count: 0,
				page: 1,
				sortby: '',
				sortmethod: '',
				selectIds: [],
				itemIdField: 'id',
				items: []
			},
			share: {
				title: '邀请您一起玩',
				orderNO: ''
			}
		};
	},
	onLoad(e) {},
	onShow() {
		this.listData.page = 1;
		this.getListData();
	},
	onReachBottom() {
		this.listData.page++;
		//this.getListData()
	},
	components: {
		MyTabs,
		uniLoadMore,
		Modal,
		customTarbar
	},
	onShareAppMessage: function (res) {
		let that = this;
		//console.log('res=====',res);
		if (res.from === 'button') {
			console.log('来自页面内转发按钮');
			return {
				title: that.share.title,
				path: '/pages/user/order/detail?orderNO=' + that.share.orderNO,
				imageUrl: baseHttp + '/image/getByImageId?imageId=e405a062-ffca-4f1b-a800-2627a8ccecce',
				success: (res) => {
					//转发成功，可以把当前页面的链接发送给后端，用于记录当前页面被转发了多少次或其他业务
				},
				fail: (res) => {
					//转发失败
				}
			};
		}
	},
	methods: {
		...util,
		shareItem() {},
		shareDialog(item) {
			this.share.orderNO = item.orderNO;
		},
		bindPickerChange(e) {
			this.hourIndex = e.target.value;
		},
		showPayRenewDialog(order) {
			this.payRenewDialog.orderNO = order.orderNO;
			this.payRenewDialog.show = true;
		},
		getRoomDetail(order, i) {
			this.$api
				.post('/room/getById', {
					roomId: order.roomId
				})
				.then((response) => {
					if (response.ret === 1) {
						this.$nextTick(() => {
							order.roomName = response.data.roomName;
							//console.log(order);
							this.listData.items[i].roomName = response.data.roomName;
							console.log('roomName:' + this.listData.items[i].roomName);
						});
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		toPay() {
			this.toPayRenew(this.payRenewDialog.orderNO, this.hourArray[this.hourIndex]);
		},
		toPayRenew(orderNO, hours) {
			wx.login({
				success: (res) => {
					if (res.code) {
						this.wxCode = res.code;
						//
						this.$api
							.post('/roomOrder/roomOrderRenew', {
								code: this.wxCode,
								orderNO: orderNO,
								hours: hours
							})
							.then((response) => {
								if (response.ret === 1) {
									debugger;
									//console.log(response);
									if (
										response.data === null ||
										response.data === undefined ||
										response.data === 'ok'
									) {
										//会员支付成功
										this.$Message.success('续单成功');
										this.goPage('/pages/tea/default/paySuccess');
									} else {
										let json = '{' + response.data + '}';
										json = json.replace(/'/g, '"');
										json = JSON.parse(json);
										console.log(json);

										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: json.timeStamp,
											nonceStr: json.nonceStr,
											package: json.package,
											signType: json.signType,
											paySign: json.paySign,
											success: (res) => {
												console.log('success:' + JSON.stringify(res));
												this.goPage('/pages/tea/default/paySuccess');
											},
											fail: function (err) {
												console.log('fail:' + JSON.stringify(err));
											}
										});
									}
								} else {
									if (
										(response.data === null || response.data === undefined) &&
										response.msg == '会员费不足，请充值'
									) {
										//"msg":"会员费不足，请充值"
										this.$Message.error(response.msg);

										setTimeout(() => {
											this.goPage('/pages/user/info/vip');
										}, 2000);
									} else {
										this.$Message.error(response.msg);
									}
								}
							});
					}
				}
			});
		},
		openHouse(item) {
			this.$api
				.post('/roomOrder/controlMachine', {
					orderNO: item.orderNO,
					machineType: 3,
					state: 1
				})
				.then((response) => {
					if (response.ret === 1) {
						this.$Message.success('操作成功');
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		onTabChange(value) {
			this.tab.current = value;
			this.listData.page = 1;
			this.getListData();
		},
		getListData() {
			if (this.listData.page == 1) {
				this.listData.items = [];
				this.listData.count = 0;
			}

			this.listData.status = 'loading';
			this.listData.loading = true;

			this.$api
				.post('/roomOrder/queryPage', {
					rowCount: 100
				})
				.then((response) => {
					if (response.ret === 1) {
						/*
						{"data":[{"endTime":"2020-12-31 18:49:19","money":16000,"orderNO":"T202012311709393003","orderType":0,"payState":1,"remark":"租用包厢","roomId":9,"startTime":"2020-12-31 16:57:24","teaHouseId":8,"userId":6},{"endTime":"2021-01-01 16:27:56","money":8000,"orderNO":"T202101019319457949","orderType":0,"payState":1,"remark":"租用包厢","roomId":9,"startTime":"2021-01-01 16:05:38","teaHouseId":8,"userId":6},{"endTime":"2021-01-01 16:46:37","money":8000,"orderNO":"T202101010402175664","orderType":0,"payState":1,"remark":"租用包厢","roomId":9,"startTime":"2021-01-01 16:33:16","teaHouseId":8,"userId":6}],"ret":1,"total":3}
						*/
						this.listData.items = response.data;
						//console.log(response.data);
						for (let i = 0; i < this.listData.items.length; i++) {
							let currentTime = parseInt(new Date().getTime() / 1000);
							let endTime = parseInt(new Date(this.listData.items[i].endTime).getTime() / 1000);
							let canRenew = true;
							let canComment = false;

							if (currentTime > endTime && currentTime - endTime > 1800) {
								canRenew = false;
							}

							if (currentTime > endTime) {
								canComment = true;
							}

							this.listData.items[i].money = this.listData.items[i].money / 100;
							this.listData.items[i].canRenew = canRenew;
							this.listData.items[i].canComment = canComment;

							//this.listData.items[i].roomName = "";
							//this.getRoomDetail(this.listData.items[i],i);
						}
						/*
						this.listData.count = response.data.count
						if (response.data) {
							this.listData.items = this.listData.items.concat(response.data.items)
						}

						this.listData.status = response.data.items.length == 0 ? "noMore" : "more"
						*/
					} else {
						this.$Message.info(response.msg);
					}

					this.listData.loading = false;
					//uni.hideLoading()
				});
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #FAF7FA;
}
button {
	margin: 0;
	padding: 0;
	outline: none;
	border-radius: 0;
	background-color: transparent;
	line-height: inherit;
	border: none !important;
}

.wish-items-list-app {
	font-size: 24rpx;
	padding: 20rpx 20rpx 150rpx 20rpx;
	.actions {
		padding: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #ECECEC;
		.order-name{
			
		}
		.order-btn{
			display: flex;
			align-items: center;
		}
		.action {
			//margin:20upx;
			//padding:20upx;
			margin-right: 10upx;
		}
	}
	.items {
		.item {
			background-color: white;
			border-radius:20rpx;
			padding: 20upx;
			margin-bottom: 20rpx;
		}
		.fields {
			.field {
				padding: 10upx;
				display: flex;
				justify-content: space-between;
				.title {
					width: 150upx;
				}
				.value {
				}
			}
		}

		// .item {
		// 	margin-left: 30upx;
		// 	margin-right: 30upx;
		// 	margin-bottom: 30upx;
		// 	margin-top: 30upx;
		// 	border-bottom: 1upx solid #eee;
		// 	padding-bottom: 20upx;
		// 	.info {
		// 		margin-left: 20upx;
		// 		display: flex;
		// 		.title {
		// 			font-weight: bold;
		// 			flex: 1;
		// 		}
		// 		.intro {
		// 			color: #929292;
		// 		}
		// 		.up {
		// 			color: green;
		// 		}
		// 		.down {
		// 			color: red;
		// 		}
		// 	}
		// 	.date {
		// 		color: #929292;
		// 		text-align: right;
		// 	}
		// }
	}
}
.btn-sm {
	font-size: 24rpx;
	color: white;
	border-radius: 8rpx;
	text-align: center;
	width: auto;
	height: 52rpx;
	line-height: 52rpx;
	background-color: $uni-theme-color;
	margin-left: 10rpx;
}

</style>
